<template>
    <view class="scroll-wrap" :style="{zIndex: zIndex}">
        <scroll-view
            v-if="!isShowList"
            class="scroll-view_hold"
            scroll-x="true"
			enhanced
			:show-scrollbar='false'
            scroll-with-animation="true"
            :scroll-left="position"
        >
		<!--  :style="choseInd === index ? getActiveStyle : getDefaultStyle" -->
            <view
                v-for="(item, index) in list"
                :key="index"
                class="scroll-view-item"
				:style="{color:`${color}`}"
				:class='{getActiveStyle:choseInd == index}'
                :data-item="item.name"
                @click="onClickScrollItem(index,item.id, $event)"
            >{{item.name}}</view>
            <view v-if="isUseOpenList" style="width:62rpx;display: inline-block;"></view>
        </scroll-view>
        <view v-if="isUseOpenList" v-show="!isShowList" class="open-list" @click="handleShowList">
            <slot name="icon-unfold">
				<view class="image_right"   :style="{background:`${bgc}`}" >
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/feRvSMcyEwtVgCfS1J504oSpoXrLtSgJv3En3o8Y.png" class="" mode="scaleToFill" v-if='bgc != "#fff"'></image>
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/WXX0QYTwOXJEDtoURv6MfoCCdrD1qPPOkmaaLwFB.png" mode="scaleToFill" v-else class="image_02"></image>
				</view>
            </slot>
        </view>
        <view v-show="isShowList" class="list-wrap bg-fff">
            <slot name="open-list-tit">
				<slot name="icon-fold">
					<view class="image_right2">
						<view class="image_right"  @click="handleShowList" :style="{background:`${bgc}`}">
							<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/feRvSMcyEwtVgCfS1J504oSpoXrLtSgJv3En3o8Y.png" class="" mode="scaleToFill" v-if='bgc != "#fff"'></image>
							<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/WXX0QYTwOXJEDtoURv6MfoCCdrD1qPPOkmaaLwFB.png"  mode="scaleToFill" v-else class="image_02"></image>
						</view>
					</view>
				</slot>
            </slot>
            <view class="flex flex-wrap padding-lr padding-bottom-sm">
                <view
                    v-for="(item, index) in list"
                    :key="index"
					:style="{color:`${color}`}"
                    class="scroll-view-item_wrap"
					:class='{getActiveStyle:choseInd == index}'
                    :data-item="item.name"
                    @click="onClickListItem(index,item.id, $event)"
                >{{item.name}}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            required: true,
            default: [],
        },
        isUseOpenList: {
            type: Boolean,
            default: true
        },
        itemStyleDefault: {
            type: Object,
            default: ()=>({}),
        },
        itemStyleActive: {
            type: Object,
            default: ()=>({})
        },
        zIndex: {
            type:  [String, Number], 
            default: 9
        },
        defaultChoseInd: {
            type: Number,
            default: 0
        },
        defaultChoseItem: {
            type: String,
            default: ''
        },
		color:{
			type: String,
			default: '#313236'
		},
		bgc:{
			type: String,
			default: '#fff'
		},
    },
    data() {
        return {
            scrollViewLeftArr: new Map(), // 存储scroll信息
            choseInd: 0, // 当前选中
            position: 0, // 滑动位置
            windowWidth: 0, // 页面高度
            isShowList: false, // 是否展示为列表形式
        }
    },
    computed: {
        getDefaultStyle() {
           const { itemStyleDefault } = this
            let defaultStyleObj = {
                color: '#393939',
                background: '#e2e2e2'
            }
            return this.setStyle(defaultStyleObj, itemStyleDefault)
        },
    //     getActiveStyle() {
    //         const { itemStyleActive } = this
    //         let activeStyleObj = {
    //             color: '#f4f4f4',
				// background: '#393939'
    //         }
    //         return this.setStyle(activeStyleObj, itemStyleActive)
    //     }
    },
    async mounted() {
        const { defaultChoseInd, defaultChoseItem }  = this || {}
        this.choseInd = defaultChoseInd

        let defaultItemInd = -1
        if (defaultChoseItem) {
           defaultItemInd =  this.list.findIndex((item) => item.name === defaultChoseItem)
           this.choseInd = defaultItemInd !== -1 ? defaultItemInd : 0
        }

        const [_, { windowWidth }] = await uni.getSystemInfo() || {}
        this.windowWidth = windowWidth
        // 获取列表每个dom的偏移量
        const query = uni.createSelectorQuery().in(this)
        query.selectAll('.scroll-view-item').boundingClientRect()
        query.exec((res) => {
            res[0].forEach((element, i)=> {
                const item = element.dataset.item
                const { left } = element || {}
                const obj = {
                    name: item,
                    left: left,
                }
                this.scrollViewLeftArr.set(item, obj)
                if (i === defaultChoseInd && !defaultChoseItem) {
                    this.position = left - (windowWidth / 2 - 30)
                }
                if (i === defaultItemInd && defaultChoseItem) {
                    this.position = left - (windowWidth / 2 - 30)
                }
            })
        })
        
    },
    methods: {
        onClickListItem(index,id, event) {
            this.isShowList = false
            const { item } = event.currentTarget.dataset
            const val = this.scrollViewLeftArr.get(item)
            this.position = val.left - (this.windowWidth / 2 - 30)
            this.choseInd = index
            this.$emit('onValueChange', {currentInd: id, currentItem: item})
            this.$emit('onListShow', true)
        },
        onClickScrollItem(index,id, event) {
            this.choseInd = index
            const { item } = event.currentTarget.dataset
            const { offsetLeft } = event.target
            this.position = offsetLeft - (this.windowWidth / 2 - 30)
            this.$emit('onValueChange', {currentInd: id, currentItem: item})
        },
        handleShowList() {
            this.isShowList = !this.isShowList
            this.$emit('onListShow', !this.isShowList)
        },
        setStyle(DefaultStyleObj, CurrentStyleObj) {
            Object.assign(DefaultStyleObj, CurrentStyleObj)
            let style = ''
            Object.keys(DefaultStyleObj).forEach(e=> {
                style += `${e}: ${DefaultStyleObj[e]};`
            })
            return style
        }
    },
}
</script>

<style scoped lang="scss">
	.open-list {
	    position: absolute;
	    right: 0;
		top:0;
	    width: 60rpx;
	    /* line-height: 119rpx; */
	    text-align: center;
	    font-weight: 600;
		background-color: #f2f2f2;
	}
.image_right{
	width: 60rpx;
	height: 56rpx;
	background-color: #f2f2f2;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	image{
		width: 48rpx;
		height: 48rpx;
	}
	.image_02{
		width: 44rpx;
		height: 44rpx;
	}
}
.image_right2{
	// padding: 30rpx 0;
	display: flex;
	justify-content: flex-end;
}
.getActiveStyle{
	color: #f4f4f4!important;
	// background: #393939!important
	background-image: linear-gradient(rgb(255,155,3), rgb(252,183,78))!important;
	    box-shadow: 0px 3px 7px 0px #ff9e0c;
}
.image{
	width: 48rpx;
	height: 48rpx;
	top: 15rpx;
}
.icon-unfold {
	width: 30rpx;
	height: 60rpx;
	padding: 30rpx 0 30rpx 0;
}	
.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}


.padding-lr {
    /* padding: 0 30rpx; */
}

.padding-bottom-sm {
    padding-bottom: 20rpx;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.text-lineheight-lg {
    line-height: 80rpx;
}
.size-28 {
    font-size: 28rpx;
}

.scroll-view_hold {
    position: relative;
    // padding: 30rpx 0 30rpx 0;
	height: 86rpx;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    /* background: #FFFFFF; */
}

.scroll-view_hold  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}


.scroll-view-item {
    min-width: 120rpx;
    padding: 0 20rpx;
    display: inline-block;
    text-align: center;
    line-height: 60rpx;
    font-size: 25rpx;
    border-radius: 32rpx;
    margin: 0 0 0 20rpx;
	background-color: #f6f7fb;
}

.scroll-wrap {
    position: relative;
    width: 100%;
	margin-top: 20rpx;
	/* background: #EEEEEE; */
}


.scroll-view-item_wrap {
	min-width:120rpx ;
	padding: 0 20rpx;
    text-align: center;
    line-height: 60rpx;
    font-size: 25rpx;
    border-radius: 32rpx;
    margin: 20rpx 0 0 30rpx;
	background: #f6f7fb;
}

.icon-fold {
    width: 30rpx;
    height: 60rpx;
}


</style>